<template>
	<view class="margin-top-sm padding-lr-xs">
		<view class="bg-white light radius-lg shadow-blur">
			<view class="container">
				<!-- <view class="avatar" :style="{ backgroundImage: `url(${receiver.path || 'static/avatar.jpg'})` }" style=""> -->
				<view class="avatar" :style="{ backgroundImage: `url('static/avatar.jpg')` }" style="">
				</view>
				<view class="below-avatar" style="font-size: 35rpx;">{{receiver.name}}</view>
				<view class="below-avatar" style="height: 65rpx; font-size: 55rpx;font-weight: bold; line-height: 65rpx;">{{recordDetail.transactionAmount}}</view>
				<view class="below-avatar" style="margin-bottom: 50rpx; font-size: 35rpx;">{{recordDetail.status}}</view>
			</view>
			<view class="bill-details">
			    <view class="item">
			        <text class="label">交易时间</text>
			        <text class="value">{{recordDetail.transactionTime}}</text>
			    </view>
			    <view class="item">
			        <text class="label">交易方式</text>
			        <text class="value">{{recordDetail.method}}</text>
			    </view>
				<view class="item">
				    <text class="label">商品说明</text>
				    <text class="value">{{recordDetail.reason}}</text>
				</view>
				<view class="item" v-if="false">
				    <text class="label"></text>
				    <text class="value">{{articleTitle}}</text>
				</view>
				<view class="item">
				    <text class="label">订单号</text>
				    <text class="value">{{recordDetail.id}}</text>
				</view>
			    <!-- 更多属性项 -->
			</view>
			<view class="balance-title" style="text-align: center;"></view>
			<view class="balance-amount" style="text-align: center;"></view>
			<!-- <view class="buttons">
	      <button class="recharge-btn" open-type="contact" data-target="ChooseModal" @tap="showModal">充值</button>
	    </view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
	  selectReceiver
	} from '/pages/mine/api/record.js';
	const receiver = ref({
		name: "xxx",
		path: "",
	});
	const articleTitle = ref("");
	const recordDetailDataString = localStorage.getItem("recordDetail");
	const recordDetail = ref({
		id: "",
		accountUserId: "",
		payerUserId: "",
		transactionAmount: "",
		transactionStatus: "",
		transactionTime: "",
		transactionType: "",
		articleId: "",
		status: "",
		reason: "",
		method:"",
	});
	
	const loadReceiver = async () => {
		const res = await selectReceiver(recordDetail.value.accountUserId);
		// console.log(res.data);
		receiver.value.name = res.data.username;
		receiver.value.path = res.data.userPhoto;
	}

	onShow(async () => {
		recordDetail.value = await JSON.parse(recordDetailDataString).data;
		if (recordDetail.value.reason == '余额充值') {
			recordDetail.value.method = '支付宝';
			console.log(recordDetail.value.method)
		}else {
			recordDetail.value.method = '余额付款';
		}
		await loadReceiver();
	});
</script>

<style scoped>
	.bill-details {
	    display: flex;
	    flex-direction: column;
	}
	
	.item {
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    margin-bottom: 17rpx; 
	}
	
	.label {
	    width: 180rpx; 
	    text-align: left;
	    padding-right: 20rpx;
		padding-left: 50rpx;
		font-weight: 100;
	}
	
	.value {
	    flex-grow: 1; /* 值区域占据剩余空间 */
		line-height: 100%;
	    text-align: left;
	}
	
	.container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.avatar {
		margin-top: 30rpx;
		text-align: center;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		border-radius: 1000rpx;
	}
	
	.below-avatar {
		height: 40rpx;
		margin-top: 14rpx; 
		font-weight: 500; 
		font-size: 31rpx;
	}

	.balance-card {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.balance-title {
		font-size: 36rpx;
		color: #333;
		margin-bottom: 20rpx;
		padding-top: 15rpx;
	}

	.balance-amount {
		font-size: 56rpx;
		color: black;
		font-weight: bold;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}
</style>